<template>
    <div class="search_cp">
        <Data_show_mode_cp
            :data_list="data_list"
            @sort-change="sortChange"
            @change_show_mode="change_show_mode">
            <template #left>
                <span>
                    {{$store.state.search_data}}
                </span>
                关键字搜索结果展示
            </template>
        </Data_show_mode_cp>
    </div>
</template>

<script>
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
export default {  //搜索结果列表显示组件（组件内请求数据）
    name: 'Search_cp',
    components:{Data_show_mode_cp},
    data(){
        return{
            data_list:[],
            order:null,
            search_data:null,
        };
    },
    watch:{
        '$store.state.search_data':{ //当全局的search_data发生变化时请求搜索的数据
            handler(){
                if(this.$store.state.search_data){
                    this.search_data = this.$store.state.search_data;
                    this.on_search();
                }
            },
            immediate:true,
        },
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            if(this.$store.state.search_data){
                this.search_data = this.$store.state.search_data;
                this.on_search();
            }
        },
    },
    created(){
    },
    methods:{
        on_search(){ //从服务端请求数据
            let search_data = this.search_data;
            if(search_data){
                this.$store.commit('set_loading',{
                    state:true,
                    msg:'请稍后',
                });
                let param = {};
                let url = '/file/findList';
                if(this.order != null){
                    param.sort = this.order;
                }
                this.$axios.json_post(url,{
                    fileTag:search_data,
                    ...param,
                }).then(({data})=>{
                    this.data_list = data;
                    this.$store.commit('setAllFileNumber',data.length);
                    this.get_file_size();
                }).finally(()=>{
                    this.$store.commit('set_loading',{
                        state:false,
                    });
                }).catch((msg)=>{
                    this.data_list = [];
                    this.$store.commit('setAllFileNumber',0);
                    this.$store.commit('setFileSize',0);
                });
            }
        },
        sortChange(order){ //排序回调方法
            if(order=="ascending"){ //升序 从小到大
                this.order = 1;
            }else if(order=="descending"){ //降序 从大到小
                this.order = 0;            
            }else{
                this.order = null;            
            }
            this.on_search();
        },
        change_show_mode(mode){ //当视图切换显示模式时重新加载数据
            if(this.old_mode != mode){
                this.old_mode = mode;
                this.order = null; 
                this.on_search();
            }
        },
        get_file_size(){ //获取文件总大小
            this.$axios.json_post('/file/findSize').then(({data})=>{
                this.$store.commit('setFileSize',data);
            }).catch(()=>{
                return;
            });
        },
    },
}
</script>

<style scoped lang='scss'>
.search_cp{
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    span{
        color: #2980ff;
        font-size: 25px;
    }
}
</style>
